<template>
  <div>
    <div id="payForm"></div>
    <div style="display:block;" v-if="isShow">
      <div class="masker"></div>
      <div class="c-mh24 c-p">
        <div class="content c-ph24 c-bg-white c-br10 c-pv20">
          <div class=""><img src="../../../assets/i/wap/common/ico-guide.png"></div>
          <p class="c-fs28">温馨提示</p>
          <p class="c-fs22 c-mt10 c-flex-row">点击右上角的
            <img src="../../../assets/i/wap/common/weixin-share1.png" class="imgbox">选择在浏览器打开
          </p>
        </div>
        <div v-show="isShowGo" class="goBk c-textAlign-c c-fs28 c-fc-white c-text-decoration-underline" @click="goPrev()">已支付完成？</div>
      </div>
    </div>

  </div>

</template>

<script>
import { utilJs } from "@/utils/common.js";
export default {
  name: "AliPayMiddlePage",
  data() {
    return {
      isShow: true,
      isShowGo: false,
    };
  },
  watch: {},
  methods: {
    goPrev() {
      if (this.$route.query.ckFrom == global.ckFrom.reservation || this.$route.query.ckFrom == global.ckFrom.flashSalesReservation || this.$route.query.ckFrom == global.ckFrom.reReservation || this.$route.query.ckFrom == global.ckFrom.seatFee) {
        this.$routerGo(this, "replace", { path: "/member/myReservation/reservationClassList" });
      } else if (this.$route.query.ckFrom == global.ckFrom.booking) {
        this.$routerGo(this, "replace", { path: "/member/myBooking/myBookingList", query: { isFromOrder: 1 } });
      } else if (this.$route.query.ckFrom == global.ckFrom.activity || this.$route.query.ckFrom == global.ckFrom.flashSalesActivity || this.$route.query.ckFrom == global.ckFrom.collageActivity) {
        this.$routerGo(this, "replace", { path: "/member/myActivity/myActivity" });
      } else {
        this.$routerGo(this, "replace", { path: "/member/myOrder/allOrderList?orderType=-1" });
      }
    },
    visibilitychange() {
      if (document.visibilityState === "hidden") {
        this.isShowGo = false;
      } else if (document.visibilityState === "visible") {
        this.isShowGo = true;
      }
    },
  },
  mounted() {
    setDocumentTitle("支付宝支付");// eslint-disable-line
    this.$store.commit("updateLoadingStatus", {
      isLoading: false
    });
    const orderNo = this.$route.query.orderId;
    const companyId = utilJs.getCompanyIdByHerf();
    //在非微信浏览器内
    if (window.navigator.userAgent.toLowerCase().match(/MicroMessenger/i) != "micromessenger") {
      this.isShow = false;
      // 向后台获取数据，插入form表单掉起支付宝
      utilJs.getMethod(`${global.apiurl}alipay/orderPay?orderNo=${orderNo}&c=${companyId}`,
        res => {
          // 插入后台返回的form表单到html中
          document.getElementById("payForm").innerHTML = res.alipayForm;
          this.$nextTick(() => {
            document.forms['alipaysubmit'].submit();
          });
        }
      );
    }
    document.removeEventListener("visibilitychange", this.visibilitychange);
    document.addEventListener("visibilitychange", this.visibilitychange);
  },
  destroyed() {
    document.removeEventListener("visibilitychange", this.visibilitychange);
  }
};
</script>
<style scoped>
.goBk {
  width: 90%;
  position: fixed;
  bottom: 5rem;
  z-index: 1003;
  max-width: 640px;
  left: 50%;
  transform: translate(-50%);
}
.content {
  width: 90%;
  position: fixed;
  top: 1rem;
  z-index: 1003;
  max-width: 640px;
  left: 50%;
  transform: translate(-50%);
}
.content > div > img {
  width: 1.2rem;
  height: 2.2rem;
  position: absolute;
  top: 0.4rem;
  right: 0.3rem;
  z-index: 1004;
}
.imgbox {
  width: 1.6rem;
  height: 0.8rem;
  margin-left: 0.2rem;
  margin-right: 0.4rem;
}
.masker {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1002;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.4);
}
</style>

